<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轮播图</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body{
            padding: 30px;
        }
        #myCarousel{

        }
        h3,p{
            color: #000033;
        }
/*修改插件中的样式的，就是用自己定义的样式覆盖原来的样式*/
        .carousel-indicators li {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 1px;
            text-indent: -999px;
            cursor: pointer;
            background-color: #000 \9;
            background-color: rgba(0, 0, 0, 0);
            border: 2px solid #CC3300;     /* 覆盖插件里圆圈的颜色 */
            border-radius: 10px
        }
        
        .carousel-indicators .active {
            width: 12px;
            height: 12px;
            margin: 0;
            background-color: #CC3300;     /* 覆盖插件里背景的颜色 */
        }

    </style>
</head>

<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">


    <!-- 图片容器 -->
    <div class="carousel-inner" >
        <div class="item active">
            <img src="image/ylimg1.jpg" alt="...">
            <div class="carousel-caption ">
            </div>
        </div>
        <div class="item">
            <img src="image/ylimg2.jpg" alt="...">
            <div class="carousel-caption">
                <h3>我的小尼克学堂</h3>
                 <p>来自美国的11项儿童能力培养方案，看中英文动画 培养儿童11项能力</p>
            </div>
        </div>

    </div>

     <!--圆圈指示符-->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- 左右控制按钮 -->
    <a class="left carousel-control" href="#myCarousel"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" ></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src='js/bootstrap.min.js'></script>
<script>
    //      $('.carousel').carousel();


// 旋转轮播属性
    //两秒钟执行一次
/*    $('.carousel').carousel({
        interval: 2000
    })*/
   // 


// 旋转轮播方法
  /*  $('.carousel').carousel('next');*/


    // 旋转轮播事件
    $('#myCarousel').on('slid.bs.carousel', function () {
        alert('图片切换完后执行该事件')
    })

</script>
</body>
</html>